<template>
  <div>
    <h3>修改个人信息</h3>
    <div>
      <div class="chitem">
        <div class="chtitle">
          <span>昵称：</span>
        </div>
        <div class="chname-input">
          <a-input v-model:value="UserInfo.name" placeholder="你的昵称" />
        </div>
      </div>
      <div class="chitem">
        <div class="chtitle">
          <span>账号：</span>
        </div>
        <div class="chname-input">
          <a-input v-model:value="UserInfo.num" placeholder="账号名称" />
        </div>
      </div>

      <div class="chitem">
        <div class="chtitle">
          <span>邮箱：</span>
        </div>
        <div class="chname-input">
          <a-input v-model:value="UserInfo.mail" placeholder="账号名称" />
        </div>
      </div>

      <div class="chitem">
        <div class="chtitle">
          <span>性别：</span>
        </div>
        <div class="chintro-input">
          <a-radio-group v-model:value="UserInfo.sex">
            <a-radio :value="0">男</a-radio>
            <a-radio :value="1">女</a-radio>
          </a-radio-group>
        </div>
      </div>

      <div class="chitem">
        <div class="chtitle">
          <span>地区：</span>
        </div>
        <div class="chname-input">
          <a-input v-model:value="UserInfo.area" placeholder="账号名称" />
        </div>
      </div>

      <div class="chitem">
        <div class="chtitle">
          <span>个人简介：</span>
        </div>
        <div class="chintro-input">
          <a-textarea
            v-model:value="UserInfo.intro"
            placeholder="写点东西"
            :rows="4"
          />
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: center">
      <div style="width: 400px;margin-top: 18px;">
        <a-button type="primary" block @click="postUserInfo">提交修改</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import {computed, reactive, ref} from "vue";
import {get, post, removeLocalToken, tip} from "@/common";
export default {
  data(){
    const UserInfo = reactive({
      id: null,
      num: null,
      name: null,
      mail: null,
      avatar: null,
      reg: null,
      state: null,
      sex: null,
      intro: null,
      area: null,
      birth: null
    });
    return {
      UserInfo,
      router: useRouter()
    }
  },
  methods:{
    getUserInfo(){
      get('/user/'+this.$route.params.account+'/info').then((res)=>{
        if(res!=null){
          this.UserInfo=res.data;
        }
      })
    },
    postUserInfo(){
      post('/user/'+this.$route.params.account+'/info', this.UserInfo).then((res)=>{
        if(res!=null){
          tip.success("修改成功!");
          if(this.UserInfo.num!==this.$route.params.account){
            console.log("检测到用户名称更改");
            this.router.push({path: '/user/'+this.UserInfo.num}).then(()=>{
              location.reload();
            })
          }
        }
      }).catch((err)=>{
        location.reload();
      })
    }
  },
  mounted(){
    this.getUserInfo();
  }
}
</script>

<style>
h3 {
  font-size: 16px;
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  padding-left: 8px;
  margin-left: 10px;
  line-height: 16px;
  margin-bottom: 15px;
  font-weight: normal;
  margin-top: 10px;
  text-align: left;
}

.chitem {
  padding: 10px 5px 10px;
  display: flex;
  margin-left: 50px;
}

.chtitle {
  height: 32px;
  width: 150px;
  font-size: 14px;
  float: left;
  display: flex;
  align-items: center;
}

.chname-input {
  float: left;
  width: 300px;
}
.chintro-input {
  float: left;
  width: 500px;
}
</style>
